<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物案例</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<style>
    th,td {
        padding: 8px 16px;
        border: 1px solid #e9e9e9;
        text-align: left;
        }
    th {
        background-color: #f7f7f7;
        color: #5c6b77;
        font-weight: 600;
    }
</style>
<body>
    <div id="app"></div>
    <!--表格-->
    <div v-if="books.length"></div>
    <table border="1px solid #e9e9e9" border-collapse="collapse" border-spacing="0">  
        <!--第一行-->
        <tr>
            <th></th>
            <th>书籍名称</th> 
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </tr>
        <!--第二行-->
        <tr v-for="(item,index) in books" :key="item.id">
            <td>1</td>
           <td>《算法导论》</td>
           <td>2006-9</td>
           <td>¥85.00</td>
           <td>
               <button v-onclick="decrement(index)" :disabled="item.cont===1">-</button>
               1
               <button v-onclick="increment(index)">+</button>
           </td>
           <td>
            <button v-onclick="handleRemove(index)">移除</button>
           </td>
        </tr>
        <!--第三行-->
        <tr v-for="(item,index) in books" :key="item.id">
            <td>2</td>
            <td>《UNTX编程艺术》</td>
            <td>2006-2</td>
            <td>¥59.00</td>
            <td>
                <button v-onclick="decrement(index)" :disabled="item.cont===1">-</button>
               3
               <button v-onclick="increment(index)">+</button>
            </td>
            <td>
                <button v-onclick="handleRemove(index)">移除</button>
            </td>
        </tr>
        <!--第四行-->
        <tr v-for="(item,index) in books" :key="item.id">
            <td>3</td>
            <td>《编程珠玑》</td>
            <td>2008-10</td>
            <td>¥39.00</td>
            <td>
                <button v-onclick="decrement(index)" :disabled="item.cont===1">-</button>
               1
               <button v-onclick="increment(index)">+</button>
            </td>
            <td>
                <button v-onclick="handleRemove(index)">移除</button>
            </td>
        </tr>
        <!--第五行-->
        <tr v-for="(item, index) in books" :key="item.id">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date}}</td>
            <td>{{item.price | showPrice}}</td>
            <td>
                <button v-onclick="decrement(index)" :disabled="item.cont===1">-</button>
               1
               <button v-onclick="increment(index)">+</button>
            </td>
            <td>
                <button v-onclick="handleRemove(index)">移除</button>
            </td>
      </tr>



    </table>
    <div>
        总价: {{totalPrice | showPrice}}
    </div>
    <div>
        <div v-else>购物车为空</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="main.js"></script>
    <script>
    const app =    new Vue({
            el: "#app",
            data() {
                return {
                    test: "sdfjsdkfsjdlkfjs",
                    book:[{
                        id:1,
                        name: '《算法导论》',
                        data: '2006-9',
                        price: 85.00,
                        count:1
                           },
                        {
                        id:2,
                        name: '《UNTX编程艺术》',
                        date: '2006-2',
                        price:59.00,
                        count:1
                        },
                        {
                        id:3,
                        name: '《编程珠玑》',
                        date:'2008-10',
                        price:39.00,
                        count:1
                        },
                        {
                        id:4,
                        name: '《代码大全》',
                        date: '2006-3',
                        price:128.00,
                        count:1
                        }
                     ]
                }
            },
            methods:{
                decrement(index) {
                    this.books[index].count--;
                },
                increment(index) {
                    this.books[index].count++;
                },
                handleRemove(index) {
                    this.books.splice(index,1);
                }

            },
            filters: {
                showPrice(value){
                    return '¥' + value.toFixed(2)
                }
            },
            computed: {
                totalPrice() {
                    let total = 0;
                    for (let i = 0; i < this.books.length; i++) {
                        let item = this.books[i];
                        total += item.price * item.count;
                    }
                    return total
                }

            }
        })

    </script>
   
    
</body>
</html>